// 创建一个路由器，并暴露传出去

// 第一步：引入 createRouter
import {createRouter, createWebHistory, Router} from 'vue-router'
import Props from '@/pages/01_props/Father.vue'
import Event from '@/pages/02_custom-event/Father.vue'
import Bus from '@/pages/03_mitt/Father.vue'
import Model from '@/pages/04_v-model/Father.vue'
import AttrsListeners from '@/pages/05_$attrs/Father.vue'
import RefChildrenParent from '@/pages/06_$refs-$parent/Father.vue'
import ProvideInject from '@/pages/07_provide-inject/Father.vue'
import Pinia from '@/pages/08_pinia/Father.vue'
import Slot from '@/pages/09_slot/Father.vue'
import Slot1 from '@/pages/09_my_slot/Father.vue'

// 第二步：引入路由器
const router: Router = createRouter({
    routes: [
        {
            path: '/',
            name: 'Index',
            redirect: '/home'
        },
        {
            name: 'Home',
            path: '/home',
            component: () => import('@/components/router-vue/Home.vue')
        },
        {
            name: 'News',
            path: '/news',
            component: () => import('@/components/router-vue/News.vue'),
            children: [
                {
                    name: 'Detail',
                    path: '/news/detail',
                    component: () => import('@/components/router-vue/Detail.vue'),
                    // 第一种写法：将路由收到的所有 params 参数作为 props 传给路由组件
                    // props: true

                    // 第二种写法：函数写法，可以自己决定将什么作为 props 传给路由组件
                    props(route) {
                        return route.query
                    },

                    // 第三种写法：对象写法，可以自己决定将什么作为 props 传给路由组件
                    // props: {
                    //     id: '123'
                    //
                    // }
                }
            ]
        },
        {
            name: 'About',
            path: '/about',
            component: () => import('@/components/router-vue/About.vue')
        },
        {
            path: '/props',
            component: Props
        },
        {
            path: '/event',
            component: Event
        },
        {
            path: '/mitt',
            component: Bus
        },
        {
            path: '/model',
            component: Model
        },
        {
            path: '/attrs',
            component: AttrsListeners
        },
        {
            path: '/ref-parent',
            component: RefChildrenParent
        },
        {
            path: '/provide-inject',
            component: ProvideInject
        },
        {
            path: '/pinia',
            component: Pinia
        },
        {
            path: '/slot',
            component: Slot
        },
        {
            path: '/slot1',
            component: Slot1
        },
    ],
    // 路由器的工作模式
    history: createWebHistory()
});

// 暴露出去 router
export default router;

